<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>登录 - 华平投资</title>
  <link rel="shortcut icon" type="image/x-ico" href="favicon.ico" />
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/iconfont.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/app.min.css" type="text/css" media="all" />
</head>

<body class="home fixed-nav">
  <header class="banner">
    <div class="navbar navbar-expand-xl">
      <a class="navbar-brand" href="index.html">Warburg Pincus</a>
    </div>
  </header>
  <div id="app" class="mt-10">
    <div class="row">
      <div class="col-sm-7 offset-sm-3">
        <p class="h3 text-primary">Authentication Required</p>
        <p class="h3 text-primary">需要身份验证</p>
      </div>
    </div>
    <div class="form-group row mt-5 mb-5">
      <label for="username" class="col-sm-2 offset-sm-2 col-form-label">用户名 Username：</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" id="username" placeholder="请输入用户名" v-model="username">
      </div>
    </div>
    <div class="form-group row mt-5 mb-5">
      <label for="password" class="col-sm-2 offset-sm-2 col-form-label">密码 Password：</label>
      <div class="col-sm-5">
        <input type="password" class="form-control" id="password" placeholder="请输入密码" v-model="password">
      </div>
    </div>
    <div class="form-group row mt-5 mb-5">
      <label for="code" class="col-sm-2 offset-sm-2 col-form-label">验证码 Captcha：</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="code" placeholder="请输入验证码" v-model="code">
      </div>
      <div class="col-sm-2" @click="getcodeimage">
        <img :src="href" alt="验证码">
      </div>
    </div>
    <div class="form-group row mb-10">
      <div class="form-check col-sm-3 offset-sm-4">
        <label class="form-check-label" for="remember">
          <input class="form-check-input" type="checkbox" value="" id="remember" required v-model="remember">
          <span>记住我的登录信息 Remember Me</span>
        </label>
      </div>
      <div class="col-sm-3">
        <button class="btn btn-primary" @click="login">登录 Login</button>
      </div>
    </div>
    <footer class="content-info fixed-bottom" style="position: fixed;">
      <p>© 2020 Warburg Pincus LLC. 版权所有。</p>
    </footer>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/vue.js"></script>
  <script>

    var v = new Vue({
      el: '#app',
      data: {
        obj: [],
        children: [],
        username: "",
        password: "",
        remember: false,
        code: "",
        href:""
      },
      created: function () {
        var self = this;
        $.ajax({
          url: '/api/category/list',
          type: 'get',
          data: {},
          dataType: 'json'
        }).then(function (res) {
		
		if(res.code==0){
			location.href="/resource/index.html";
		}


        }).fail(function () {
          console.log('失败');
        })

        this.getcodeimage();
      },
      watch: {
        obj: function () {
          this.$nextTick(function () {
            /*现在数据已经渲染完毕*/
            this.initlist();
          })
        }
      },
      methods: {
        initlist: function () {

        },
        getcodeimage: function () {
          this.href = "/captcha/captchaImage?type=char&s=" + Math.random();
        },
        login: function () {

          var self = this;
          $.ajax({
            url: '/login',
            type: 'post',
            data: {
              username: self.username,
              password: self.password,
              validateCode: self.code,
              rememberMe: self.remember
            },
            dataType: 'json'
          }).then(function (res) {
            if (res.code == 0) {
              location.href = "/resource/index.html";
            } else {

              alert(res.msg);
            }

          }).fail(function () {
            console.log('失败');
          })

        }
      }

    });

  </script>

</body>

</html>